@import "./reset";
@import "./common";
@import "./theme";

#app {
  height: 100vh;
}

.danger {
  &.el-button--text {
    color: #f56c6c;
  }
}

.operate-button {
  font-size: 16px;
}

.page-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .page-search {
    .el-form {
      &.el-form--inline {
        display: flex;
      }
    }
  }

  .page-table-tool {
    align-self: flex-end;
    margin-bottom: 10px;
  }

  .page-table {
    flex: 1;
  }

  .page-bottom {
    display: flex;
    margin-top: 10px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    // flex-direction: column;

    .batch-operate {
      display: flex;
      align-items: center;

      .tip {
        position: relative;
        padding: 0 15px;
        height: 32px;
        line-height: 32px;
        font-size: 12px;
        background: @button-background-color;
        color: @button-text-color;
        &::after {
          content: "";
          position: absolute;
          top: 6px;
          right: -18px;
          width: 0;
          height: 0;
          border: 10px solid;
          border-color: transparent transparent transparent
            @button-background-color;
        }
      }

      ul {
        box-sizing: border-box;
        display: inline-block;
        height: 32px;
        line-height: 32px;
        font-size: 12px;
        overflow: hidden;
        background-color: #f4f4f5;
        padding: 0 20px;
        border-radius: 0 50px 50px 0;
        margin-left: -6px;
        margin-bottom: 0;
      }
    }

    // align-self: center;

    .pagination {
      flex: 1;
      text-align: end;
      // align-self: flex-end;
    }
  }
}
